<!-- S search -->
<app-search-bar
  [submitLoading]="tableParams.loading"
  [searchOptions]="searchOptions"
  (onSearch)="queryData($event)"
  (onReset)="resetData($event)"
>
</app-search-bar>
<!-- E search -->

<nz-card class="m-t-2">
  <div class="oprea-wrap">
    <button
      nz-button
      nzType="primary"
      [disabled]="!permission.userPermission.has('secondUserCoupon:withdrawCoupon')"
      (click)="showWithdrawModal(0)"
    >批量撤回用户用券</button>
  </div>

  <div class="pagination-wrap-position table-wrap p-t-10">
    <nz-table
      #basicTable
      nzSize="small"
      nzShowSizeChanger
      nzShowQuickJumper
      nzOuterBordered
      [nzScroll]="{ x: '1100px' }"
      [nzFrontPagination]="false"
      [nzLoadingDelay]="100"
      [nzLoading]="tableParams.loading"
      [nzData]="tableParams.tableData"
      [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
      [nzTotal]="tableParams.total"
      [nzPageIndex]="tableParams.page"
      [nzPageSize]="tableParams.pageSize"
      [nzShowTotal]="totalTemplate"
      (nzPageIndexChange)="onPageIndexChange($event)"
      (nzPageSizeChange)="onPageSizeChange($event)"
      (nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
    >
      <thead>
        <tr>
          <th
            nzLeft
            nzWidth="50px"
            [(nzChecked)]="checked"
            [nzIndeterminate]="indeterminate"
            (nzCheckedChange)="onAllChecked($event)"
          ></th>
          <th nzAlign="center" nzWidth="180px" nzLeft>优惠券ID</th>
          <th nzAlign="center" nzWidth="180px">用户优惠券ID</th>
          <th nzAlign="center" nzWidth="120px">客户ID</th>
          <th nzAlign="center" nzWidth="200px">优惠券名称</th>
          <th nzAlign="center" nzWidth="120px">领取面值</th>
          <th nzAlign="center" nzWidth="120px">实际抵扣</th>
          <th nzAlign="center" nzWidth="180px">关联订单号</th>
          <th nzAlign="center" nzWidth="170px">领取时间</th>
          <th nzAlign="center" nzWidth="170px">过期时间</th>
          <th nzAlign="center" nzWidth="170px">使用时间</th>
          <th nzAlign="center" nzWidth="150px">状态</th>
          <th nzAlign="center" nzRight nzWidth="150px">操作</th>
        </tr>
      </thead>

      <tbody>
        <tr *ngFor="let data of basicTable.data; let index = index;">
          <td
            nzLeft
            [nzDisabled]="data.status !== 1"
            [nzChecked]="setOfCheckedId.has(data.id)"
            (nzCheckedChange)="onItemChecked(data.id, $event)"
          ></td>
          <!-- 优惠券ID -->
          <td nzAlign="center" nzLeft>{{ data.couponNo || '-' }}</td>

          <!-- 用户优惠券ID -->
          <td nzAlign="center">{{ data.id }}</td>

          <!-- 客户ID -->
          <td nzAlign="center">
            <a
              nz-button
              nzType="link"
              target="_blank"
              [routerLink]="['/customer/tabs', data.realUserId, 0]"
            >{{ data.realUserId }}</a>
          </td>

          <!-- 优惠券名称 -->
          <td nzAlign="center">
            {{ data.couponName }}
            <i nz-icon nz-tooltip nzType="exclamation-circle" nzTheme="outline" [nzTooltipTitle]="titleTemplate"></i>
            <ng-template #titleTemplate>
                <p>名称: {{ data?.couponInfo?.couponName || '-' }}</p>
                <p>备注: {{ data?.couponInfo?.remark || '-' }}</p>
                <p>类型: {{ data?.couponInfo?.type || '-' }}</p>
                <p>内容: {{ data?.couponInfo?.useDesc || '-' }}</p>
            </ng-template>
          </td>

          <!-- 领取面值 -->
          <td nzAlign="center">
            <div [ngSwitch]="data?.couponInfoType">
              <!-- 满减 -->
              <div *ngSwitchCase="1">
                {{ data.couponLimitSmall }}
              </div>
              <!-- 折扣 -->
              <div *ngSwitchCase="2">
                {{ data.couponLimitSmall }}<span>折</span>
              </div>
              <!-- 随机 -->
              <div *ngSwitchCase="3">
                {{ data.discountsAmount }}
              </div>
              <div *ngSwitchDefault>-</div>
            </div>
          </td>

          <!-- 实际抵扣 -->
          <td nzAlign="center">
            <ng-container *ngIf="data.useTime;else templateAmount">
              {{ data.discountsAmount ? '￥' + data.discountsAmount : '-'}}
            </ng-container>
            <ng-template #templateAmount>-</ng-template>
          </td>

          <!-- 关联订单号 -->
          <td nzAlign="center">{{ data.orderNum || '-' }}</td>

          <!-- 领取时间 -->
          <td nzAlign="center">{{ (data.getTime | date: 'yyyy-MM-dd HH:mm:ss') || '-' }}</td>

          <!-- 过期时间 -->
          <td nzAlign="center">{{ (data.endTime | date: 'yyyy-MM-dd HH:mm:ss') || '-' }}</td>

          <!-- 使用时间 -->
          <td nzAlign="center">{{ (data.useTime | date: 'yyyy-MM-dd HH:mm:ss') || '-' }}</td>
          
          <!-- 状态 -->
          <td nzAlign="center">
            {{ data.status | userCouponStatus: 'label' }}
            <i
              *ngIf="data.status === 5"
              nz-icon
              nzType="exclamation-circle"
              nzTheme="outline"
              nz-tooltip
              [nzTooltipTitle]="data?.remark"
            ></i>
          </td>

          <!-- 使用时间 -->
          <td nzAlign="center" nzRight>
            <button
              nz-button
              nzType="link"
              nzSize="small"
              [disabled]="data.status !== 1 || !permission.userPermission.has('secondUserCoupon:withdrawCoupon')"
              (click)="showWithdrawModal(1, data)"
            >撤回用户用券</button>
          </td>
        </tr>
      </tbody>
    </nz-table>

    <!-- 分页template -->
    <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
  </div>
</nz-card>

<!-- S 撤回Modal -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzFooter]="null"
  [(nzVisible)]="isWithdrawVisible"
  [nzTitle]="'撤回用户用券'"
  (nzOnCancel)="isWithdrawVisible = false">

  <div *nzModalContent>
    <div class="custom-model-body">
      <nz-form-item>
        <nz-form-label [nzSpan]="4" nzRequired>撤回原因</nz-form-label>
        <nz-form-control [nzSpan]="20">
          <nz-textarea-count [nzMaxCharacterCount]="200">
            <textarea
              rows="4"
              nz-input
              maxlength="200"
              placeholder="请输入撤回原因"
              [(ngModel)]="withdrawParams.remark"
            ></textarea>
          </nz-textarea-count>
        </nz-form-control>
      </nz-form-item >
    </div>

    <div class="custom-model-foot">
      <div class="custom-foot-cont">
        <button nz-button nzType="default" (click)="isWithdrawVisible = false">取消</button>
        <button nz-button nzType="primary" [nzLoading]="withdrawLoading" (click)="subWithdraw()">确认撤回</button>
      </div>
    </div>
  </div>
</nz-modal>
<!-- S 撤回Modal -->